<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view>

<h:head>
	<title><ui:insert name="title">The title of the page</ui:insert></title>
	<meta name="author" content="" />
	<meta name="copyright" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="robots" content="" />
	<meta http-equiv="content-language" content="" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<meta http-equiv="content-style-type" content="text/css" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="imagetoolbar" content="no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/resources/images/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/styles.css"/>
	<!--[if IE]><link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/mod-ie.css"><![endif]-->
    <!--[if IE 8]><link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/mod-ie8.css"><![endif]-->
    <ui:insert name="script"/>
</h:head>

<h:body>
    <div id="mainContainerHolder">
        <p:ajaxStatus id="ajaxStatusPanel" styleClass="loading">
            <f:facet name="start">
                <span class="backround" />
                <div class="info-panel">
                    <div style="text-align: center">
                        <h:outputText value="#{msg['InProgressScreen.label']}" /><br/>
                        <h:graphicImage library="images" name="loading.gif" alt="#{msg['InProgressScreen.imgAlt']}"/>
                    </div>
                </div>
            </f:facet>
            <f:facet name="complete">
                <h:outputText value="" />
            </f:facet>
        </p:ajaxStatus>

        <!-- header -->
        <div id="header">
            <div class="left">
                <div class="title">
                    <h:outputText value="DAMA" styleClass="title white" />
                    <h:outputText value="TE" styleClass="title orange" /><br/>
                    <h:outputText value="Developers' Activity - Monitoring and Analyzer" styleClass="subtitle white" />
                    <h:outputText value="Tool for Eclipse" styleClass="subtitle orange" />
                </div>
                <h:graphicImage styleClass="center" library="images" name="header-bg-center.png" />
            </div>
            <div class="right">
                <a href="#{facesContext.externalContext.requestContextPath}"><h:graphicImage styleClass="logo" library="images" name="logo-3d.png" /></a>
                <div class="logout">
                    <h:graphicImage library="images" name="user.png" title="#{msg['Header.loggedInUser']}" alt="#{msg['Header.loggedInUser']}" />
                    <h:outputText value="#{accountSettingsManager.loggedInUser}" />
                    <h:outputLink value="#{facesContext.externalContext.requestContextPath}/j_spring_security_logout" styleClass="logoutLink">
                        <h:graphicImage library="images" name="logout-16.png" />
                        <h:outputText value="#{msg['Header.buttons.logout']}" />
                    </h:outputLink><br/>
                    <a href="javascript:$('.setLanguageToEnglish').click()" class="changeLang">
                        <h:graphicImage styleClass="lang" library="images" name="flag-en.jpg" title="#{msg['Header.buttons.flagEN.imgAlt']}" alt="#{msg['Header.buttons.flagEN.imgAlt']}"/>
                    </a>
                    <a href="javascript:$('.setLanguageToHungarian').click()" class="changeLang">
                        <h:graphicImage styleClass="lang" library="images" name="flag-hu.jpg" title="#{msg['Header.buttons.flagHU.imgAlt']}" alt="#{msg['Header.buttons.flagHU.imgAlt']}"/>
                    </a>
                </div>
            </div>
        </div>

        <div id="mainContainer">
            <h:form id="mainForm">
                <h:commandLink styleClass="setLanguageToEnglish" immediate="true" />
                <h:commandLink styleClass="setLanguageToHungarian" immediate="true" />

                <h:panelGroup styleClass="navigation">
                    <h:commandLink action="mainPage.xhtml?faces-redirect=true" immediate="true" />
                    <h:commandLink action="administration.xhtml?faces-redirect=true" immediate="true" />
                    <h:commandLink action="manager.xhtml?faces-redirect=true" immediate="true" />
                    <h:commandLink action="resources.xhtml?faces-redirect=true" immediate="true" />
                    <h:commandLink action="diagrams.xhtml?faces-redirect=true" immediate="true" />
                    <h:commandLink action="reports.xhtml?faces-redirect=true" immediate="true" />
                    <h:commandLink action="accountSettings.xhtml?faces-redirect=true" immediate="true" />
                </h:panelGroup>

                <p:tabView id="id-mainPage-tab-panel" styleClass="tabPanel" dynamic="true" activeIndex="#{layoutTabView.activeTabIndex}" onTabChange="handleTabChange(index)" widgetVar="mainTabView">
                    <p:tab id="home" title="#{msg['TabPanel.home']}" titleStyleClass="home">
                        <ui:insert name="home" />
                    </p:tab>
                    <p:tab id="administration" title="#{msg['TabPanel.administration']}">
                        <div class="toolbar">
                            <div class="bgBase" />
                            <div class="bgImages">
                                <h:graphicImage library="images" name="toolbar-bg-bottom-mask.png" styleClass="toolbarBgBottom" />
                            </div>
                            <div class="buttons"><ui:insert name="toolbar"/></div>
                        </div>
                        <div class="contentWrapper"><ui:insert name="administration"/></div>
                    </p:tab>
                    <p:tab id="manager" title="#{msg['TabPanel.manager']}">
                        <div class="toolbar">
                            <div class="bgBase" />
                            <div class="bgImages">
                                <h:graphicImage library="images" name="toolbar-bg-bottom-mask.png" styleClass="toolbarBgBottom" />
                            </div>
                            <div class="buttons"><ui:insert name="toolbar"/></div>
                        </div>
                        <div class="contentWrapper"><ui:insert name="manager" /></div>
                    </p:tab>
                    <p:tab id="resources" title="#{msg['TabPanel.resources']}">
                        <!--div class="toolbar">
                            <div class="bgBase" />
                            <div class="bgImages">
                                <h:graphicImage library="images" name="toolbar-bg-bottom-mask.png" styleClass="toolbarBgBottom" />
                            </div>
                            <div class="buttons"><ui:insert name="toolbar"/></div>
                        </div-->
                        <div class="contentWrapper noToolbar"><ui:insert name="resources" /></div>
                    </p:tab>
                    <p:tab id="diagrams" title="#{msg['TabPanel.diagrams']}">
                        <!--div class="toolbar">
                            <div class="bgBase" />
                            <div class="bgImages">
                                <h:graphicImage library="images" name="toolbar-bg-bottom-mask.png" styleClass="toolbarBgBottom" />
                            </div>
                            <div class="buttons"><ui:insert name="toolbar"/></div>
                        </div-->
                        <div class="contentWrapper noToolbar"><ui:insert name="diagrams" /></div>
                    </p:tab>
                    <p:tab id="reports" title="#{msg['TabPanel.reports']}">
                        <!--div class="toolbar">
                            <div class="bgBase" />
                            <div class="bgImages">
                                <h:graphicImage library="images" name="toolbar-bg-bottom-mask.png" styleClass="toolbarBgBottom" />
                            </div>
                            <div class="buttons"><ui:insert name="toolbar"/></div>
                        </div-->
                        <div class="contentWrapper noToolbar"><ui:insert name="reports" /></div>
                    </p:tab>
                    <p:tab id="account" title="#{msg['TabPanel.accountSettings']}">
                        <div class="contentWrapper noToolbar"><ui:insert name="account" /></div>
                    </p:tab>
                </p:tabView>

                <script type="text/javascript" language="JavaScript">
                    function handleTabChange(index) {
                        $(".navigation a")[index].click();
                    }
                    function getTabIndex(tabName) {
                        var tabIndex = null;
                        $("#mainContainerHolder #mainContainer .tabPanel .ui-tabs-nav li a").each(function (idx) {
                            if ($(this).attr("href").match(tabName+"$") == tabName) {
                                tabIndex = idx;
                            }
                        });
                        return tabIndex;
                    }
                    function selectTab(tabName) {
                        var tab = getTabIndex(tabName);
                        if (mainTabView.getActiveIndex() != tab) {
                            mainTabView.select(tab);
                        }
                    }
                </script>
            </h:form>
        </div>

        <!-- footer -->
        <div id="footer">
            <div class="copyright"><h:outputText value="#{msg['Footer.copyright']}" escape="false" /></div>
        </div>
    </div>
    <ui:insert name="onAfterPageLoad" />
</h:body>

</f:view>
</html>